<!--
 * @Date: 2023-10-12 15:19:48
 * @Description: 优势
 * @LastEditors: hujingyang
 * @Author: hujingyang
 * @FilePath: \xunku_official_website\src\pages\Advantage\advantagePage.vue
 * @IDE: Created by VScode.
-->
<template>
  <div style="background-color: #fff">
    <BannerComponent
      :banner="banner"
      gradientColorStart="#8fc4f8"
      gradientColorEnd="#395ebd"
      aria-label="头部banner图"
    />

    <div class="orientation-cards">
      <BannerComponent
        banner="https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_background%40960x333.png"
        gradientColorStart="#efefef"
        gradientColorEnd="#f0f0f0"
        aria-label="头部banner图"
        :height="333"
        style="position: absolute; top: 0"
      />

      <LittleTitleComponent
        primaryTitle="专业、精确、降本、增效"
        secondTitle="PROFESSIONAL, PRECISE, COST-EFFECTIVE, AND EFFICIENT"
        aria-label="模块标题"
        style="height: 120px; position: absolute; top: 0"
      />

      <div class="orientation-cards-content">
        <div class="cards-content">
          <div
            v-for="(item, index) in orientationCards"
            :key="index"
            class="content-item"
          >
            <img :src="item.icon" alt="" class="item-icon" />
            <div class="item-title">{{ item.title }}</div>
            <div class="item-describe">{{ item.describe }}</div>
          </div>
        </div>
      </div>
    </div>

    <LittleTitleComponent
      primaryTitle="全面提升 服务质量"
      secondTitle="COMPREHENSIVELY IMPROVING SERVICE QUALITY"
      aria-label="模块标题"
      style="height: 100px; margin-bottom: 36px"
    />

    <div class="services-cards">
      <BannerComponent
        banner="https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_background%40960x552.png"
        gradientColorStart="#fff"
        gradientColorEnd="#fff"
        aria-label="头部banner图"
        :height="552"
      />
      <div class="services-cards-content">
        <div
          v-for="(item, index) in servicesCards"
          :key="index"
          class="content-item"
          :class="{ largeItem: item.large }"
          :style="`background-image:url(${item.icon})`"
        >
          <div class="item-title">{{ item.title }}</div>
          <div class="item-describe">{{ item.describe }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      // 首页顶部图
      banner:
        "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/banner_3%40960x231.png",

      /**定位目标 卡片模块 */
      orientationCards: [
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_icon_1%4032x32.png",
          title: "即时、准确反馈，有效防控风险",
          describe:
            "与合作单位即时数据对接、及时反馈库存审查情况，审查流程与结果“可视化”，所有报表、报告等巡库材料全部由后台稽核，确保信息反馈准确、及时。同时根据合作单位的要求实时处理现场风险因素。",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_icon_2%4032x32.png",
          title: "专注库存审查业务14年",
          describe:
            "从2009年起与平安银行合作巡核库业务以来，一直致力于服务金融机构贷后库存审查服务。",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_icon_3%4032x32.png",
          title: "与各银行展开深度合作",
          describe:
            "先后与平安银行16家分支行、平安银行-宝马金融（并行贷款）、宁波通商银行、浦发银行、特雷克斯融资租赁公司、中信银行合作，并得到合作单位的一致好评。",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_icon_4%4032x32.png",
          title: "库存审查效率的大幅 提升、成本大幅下降",
          describe:
            "利用规模效应，将库存审查效率保持在100笔/日以上，审查成本得到了极大的压缩，预计比银行客户经理库存审查的效率提高3倍以上，巡库成本约为1/2。",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_icon_5%4032x32.png",
          title: "累计完成27万余笔审查",
          describe:
            "14年来，我司完成汽车一网库存审查10余万笔，二网审查10万余笔。2022年库存审查超过3.8万笔。",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/content_icon_6%4032x32.png",
          title: "审查范围全国覆盖",
          describe:
            "我司日常库存审查覆盖全国31个省(区/市)，330多个地级市，真正做到全国无盲区覆盖。",
        },
      ],

      /**全面提升 服务质量卡片模块 */
      servicesCards: [
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_icon_1%40193x262.png",
          title: "日常库存审查作业智能化",
          describe:
            "开发巡库系统，全面实现线上化巡库操作平台\n·实时定位、轨迹分析·照片防伪\n·车架号自动识别、抓取\n·盘点数据与库存数据自动匹配\n·报表自动生成\n·大数据管理，资料即时调取",
          large: true, //大卡片布局
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_icon_4%40193x173.png",
          title: "库存审查覆盖本地化",
          describe:
            "增加各省范围内增设驻点巡库小组，实现省内短距离巡库，增加巡库检查的突击性，进一步减少巡库响应时间",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_icon_2%40193x188.png",
          title: "数据分享实时化",
          describe:
            "为各分支行开启数据端口，实时查看库存动态数据，实时数据分析输出。",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_icon_5%40193x248.png",
          title: "风险预警系统化",
          describe:
            "· 打通线上、线下风险预警机制\n· 打通一网、二网预警机制\n· 打通集团、经销商预警机制\n· 打通行业、品牌预警机制\n· 打通银行、睿信预警机制",
          large: true, //大卡片布局
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_icon_3%40193x262.png",
          title: "后续跟进针对化",
          describe:
            "利用大数据对比分析，动态评估经销商风险程度，进行个性化的后续跟进，针对高风险的经销商加密巡核，并与银行协同处理风险隐患。",
          large: true, //大卡片布局
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/03.Advantage/card_icon_6%40193x173.png",
          title: "应急处理及时化",
          describe:
            "利用库存审查本地化的优势，同时借助风险预警机制，进行实时风险反馈，及时的应急处理",
        },
      ],
    });

    function test() {
      console.log("test");
    }
    return {
      ...toRefs(state),
      test,
    };
  },
};
</script>

<style scoped lang="scss">
.orientation-cards {
  position: relative;
  width: 100%;
  height: 470px;

  .orientation-cards-content {
    position: absolute;
    bottom: 40px;
    left: calc(50% - 700px / 2);
    width: 700px;
    height: 270px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.09);
    font-size: 10px;

    .cards-content {
      display: flex;
      padding: 10px;
      justify-content: space-between;
      height: calc(100% - 50px);

      .content-item {
        width: calc(100% / 6 - 10px);
        border-right: 1px solid #eee;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 14px;

        .item-icon {
          width: 32px;
          height: 32px;
        }

        .item-title {
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #375bbc;
          height: 24px;
        }

        .item-describe {
          height: 114px;
          color: #8e8e8e;
          line-height: 13px;
        }
      }
      .content-item:nth-last-child(1) {
        border-right: unset;
      }
    }
  }
}

.services-cards {
  height: 600px;
  width: 100%;
  position: relative;
  background: #fff;

  .services-cards-content {
    height: 460px;
    width: 588px;
    // background-color: #c0b6;
    position: absolute;
    top: 62px;
    left: calc(50% - 600px / 2);
    column-count: 3; //设置瀑布流分栏
    // column-gap: 2px;//设置瀑布流分栏 间距

    .content-item {
      width: 193px;
      height: 188px;
      background: #ffffff;
      border-radius: 4px;
      margin-bottom: 10px;
      break-inside: avoid; //设置由于瀑布流分栏导致的首尾元素被切割
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;

      .item-title {
        font-size: 13px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: bold;
        color: #000000;
        line-height: 9px;
      }

      .item-describe {
        font-size: 10px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #949494;
        line-height: 15px;
        white-space: pre-line;
        padding: 0 20px;
      }
    }

    .content-item.largeItem {
      width: 193px;
      height: 248px;
    }
  }
}
</style>
